@import './config.scss';
@import './common/functions/list.scss';
// @use './config.scss' as *;
// @use './common/functions/list.scss' as *;

//#region 分栏
// $newSizeTarget: list-slice($sizeTargetList, 1, 2);
$newSizeTarget: $sizeTargetList;
$newSizeUnitBaseList: list-slice($sizeUnitBaseList, 1, 3);

@each $n in $columnsList {
  @each $name in $newSizeTarget {
    @each $unit in $newSizeUnitBaseList {
      @if $unit ==fill {
        @for $i from 1 through $n {
          @if not ($i ==$n) {
            [class~='#{$name}-#{$i}/#{$n}'] {
              #{$name}: calc($i / $n * map-get($sizeUnitBaseMap, $unit));
            }

            // 提升权重
            [class][class~='!#{$name}-#{$i}/#{$n}'] {
              #{$name}: calc($i / $n * map-get($sizeUnitBaseMap, $unit));
            }
          }
        }
      }

      @else {
        @for $i from 1 through $n {
          @if not ($i ==$n) {
            [class~='#{$name}-#{$unit}-#{$i}/#{$n}'] {
              #{$name}: calc($i / $n * map-get($sizeUnitBaseMap, $unit));
            }

            // 提升权重
            [class][class~='!#{$name}-#{$unit}-#{$i}/#{$n}'] {
              #{$name}: calc($i / $n * map-get($sizeUnitBaseMap, $unit));
            }
          }
        }
      }
    }

  }
}

//#endregion

// ===========================================================
//#region margin
$marginMap: map-merge($gapSuffixMap, $BaseSuffixMap);
$marginList: list-merge($gapSuffixList, $baseSuffixList);

@each $name in $directionSuffixList {
  @each $suffix in $marginList {
    @if $suffix ==default {
      @if $name ==default {
        .margin {
          margin: map-get($marginMap, $suffix);
        }

        // 外边距为负的情况
        .-margin {
          margin: calc(0px - map-get($marginMap, $suffix));
        }

      }

      @else {
        .margin-#{$name} {
          margin-#{$name}: map-get($marginMap, $suffix);
        }

        // 外边距为负的情况
        .-margin-#{$name} {
          margin-#{$name}: calc(0px - map-get($marginMap, $suffix));
        }
      }
    }

    @else {
      @if $name ==default {
        .margin-#{$suffix} {
          margin: map-get($marginMap, $suffix);
        }


        // 提升权重
        [class][class][class][class~='!margin-#{$suffix}'] {
          margin: map-get($marginMap, $suffix);
        }

        // !只对sm、gl等处理
        @if not index($baseSuffixList, $suffix ) {

          // 外边距为负的情况
          .-margin-#{$suffix} {
            margin: calc(0px - map-get($marginMap, $suffix));
          }
        }
      }

      @else {
        .margin-#{$name}-#{$suffix} {
          margin-#{$name}: map-get($marginMap, $suffix);
        }

        // 提升权重
        [class][class][class][class~='!margin-#{$name}-#{$suffix}'] {
          margin-#{$name}: map-get($marginMap, $suffix);
        }

        // !只对sm、gl等处理
        @if not index($baseSuffixList, $suffix ) {

          // 外边距为负的情况
          .-margin-#{$name}-#{$suffix} {
            margin-#{$name}: calc(0px - map-get($marginMap, $suffix));
          }
        }
      }
    }
  }
}

@each $name in $rowColSuffixList {
  @each $suffix in $marginList {
    @if $suffix ==default {
      @if $name ==lr {
        .margin-#{$name} {
          margin-left: map-get($marginMap, $suffix);
          margin-right: map-get($marginMap, $suffix);
        }
      }

      @else {
        .margin-#{$name} {
          margin-top: map-get($marginMap, $suffix);
          margin-bottom: map-get($marginMap, $suffix);
        }
      }
    }

    @else {
      @if $name ==lr {
        .margin-#{$name}-#{$suffix} {
          margin-left: map-get($marginMap, $suffix);
          margin-right: map-get($marginMap, $suffix);
        }

        // 提升权重
        [class][class~='!margin-#{$name}-#{$suffix}'] {
          margin-left: map-get($marginMap, $suffix);
          margin-right: map-get($marginMap, $suffix);
        }
      }

      @else {
        .margin-#{$name}-#{$suffix} {
          margin-top: map-get($marginMap, $suffix);
          margin-bottom: map-get($marginMap, $suffix);
        }

        // 提升权重
        [class][class~='!margin-#{$name}-#{$suffix}'] {
          margin-top: map-get($marginMap, $suffix);
          margin-bottom: map-get($marginMap, $suffix);
        }
      }
    }
  }
}

//#endregion
// ===========================================================
//#region padding
$paddingMap: map-merge($gapSuffixMap, $BaseSuffixMap);
$paddingList: list-merge($gapSuffixList, $baseSuffixList);

@each $name in $directionSuffixList {
  @each $suffix in $paddingList {
    @if $suffix ==default {
      @if $name ==default {
        .padding {
          padding: map-get($paddingMap, $suffix);
        }
      }

      @else {
        .padding-#{$name} {
          padding-#{$name}: map-get($paddingMap, $suffix);
        }
      }
    }

    @else {
      @if $name ==default {
        .padding-#{$suffix} {
          padding: map-get($paddingMap, $suffix);
        }

        // 提升权重
        [class][class~='!padding-#{$suffix}'] {
          padding: map-get($paddingMap, $suffix);
        }
      }

      @else {
        .padding-#{$name}-#{$suffix} {
          padding-#{$name}: map-get($paddingMap, $suffix);
        }

        // 提升权重
        [class][class~='!padding-#{$name}-#{$suffix}'] {
          padding-#{$name}: map-get($paddingMap, $suffix);
        }
      }
    }
  }
}

@each $name in $rowColSuffixList {
  @each $suffix in $paddingList {
    @if $suffix ==default {
      @if $name ==lr {
        .padding-#{$name} {
          padding-left: map-get($paddingMap, $suffix);
          padding-right: map-get($paddingMap, $suffix);
        }
      }

      @else {
        .padding-#{$name} {
          padding-top: map-get($paddingMap, $suffix);
          padding-bottom: map-get($paddingMap, $suffix);
        }
      }
    }

    @else {
      @if $name ==lr {
        .padding-#{$name}-#{$suffix} {
          padding-left: map-get($paddingMap, $suffix);
          padding-right: map-get($paddingMap, $suffix);
        }

        // 提升权重
        [class][class~='!padding-#{$name}-#{$suffix}'] {
          padding-left: map-get($paddingMap, $suffix);
          padding-right: map-get($paddingMap, $suffix);
        }
      }

      @else {
        .padding-#{$name}-#{$suffix} {
          padding-top: map-get($paddingMap, $suffix);
          padding-bottom: map-get($paddingMap, $suffix);
        }

        // 提升权重
        [class][class~='!padding-#{$name}-#{$suffix}'] {
          padding-top: map-get($paddingMap, $suffix);
          padding-bottom: map-get($paddingMap, $suffix);
        }
      }
    }
  }
}

//#endregion
// ===========================================================
//#region gap
$gapMap: map-merge($gapSuffixMap, $BaseSuffixMap);
$gapList: list-merge($gapSuffixList, $baseSuffixList);

@each $suffix in $gapList {
  @if $suffix ==default {
    .gap {
      gap: map-get($gapMap, $suffix);
    }

    @supports not (gap: map-get($gapMap, $suffix)) {
      [class].gap {
        &>* {
          margin-right: map-get($gapMap, $suffix);
          margin-bottom: map-get($gapMap, $suffix);
        }

        &>*:last-child {
          margin-right: 0;
          margin-bottom: 0;
        }
      }
    }


    .gap-row {
      row-gap: map-get($gapMap, $suffix);
    }

    @supports not (row-gap: map-get($gapMap, $suffix)) {
      [class].gap-row {
        &>* {
          margin-bottom: map-get($gapMap, $suffix);
        }

        &>*:last-child {
          margin-bottom: 0;
        }
      }
    }

    .gap-col {
      column-gap: map-get($gapMap, $suffix);
    }

    @supports not (row-gap: map-get($gapMap, $suffix)) {
      [class].gap-col {
        &>* {
          margin-left: map-get($gapMap, $suffix);
        }

        &>*:last-child {
          margin-left: 0;
        }
      }
    }
  }

  @else {
    .gap-#{$suffix} {
      gap: map-get($gapMap, $suffix);
    }

    @supports not (gap: map-get($gapMap, $suffix)) {
      [class].gap-#{$suffix} {
        &>* {
          margin-right: map-get($gapMap, $suffix);
          margin-bottom: map-get($gapMap, $suffix);
        }

        &>*:last-child {
          margin-right: 0;
          margin-bottom: 0;
        }
      }
    }

    .gap-row-#{$suffix} {
      row-gap: map-get($gapMap, $suffix);
    }

    @supports not (row-gap: map-get($gapMap, $suffix)) {
      [class].gap-row-#{$suffix} {
        &>* {
          margin-bottom: map-get($gapMap, $suffix);
        }

        &>*:last-child {
          margin-bottom: 0;
        }
      }
    }

    .gap-col-#{$suffix} {
      column-gap: map-get($gapMap, $suffix);
    }

    @supports not (row-gap: map-get($gapMap, $suffix)) {
      [class].gap-col-#{$suffix} {
        &>* {
          margin-left: map-get($gapMap, $suffix);
        }

        &>*:last-child {
          margin-left: 0;
        }
      }
    }
  }
}

//#endregion
// ===========================================================
//#region font-size line-height
@for $i from 10 through 40 {
  @if $i % 2==0 {
    .fs-#{$i} {
      font-size: #{$i}px;
    }

    .lh-#{$i} {
      line-height: #{$i}px;
    }
  }
}

//#endregion
// ===========================================================
//#region 文字溢出隐藏
.text-overflow-hide {
  overflow: hidden;
  /* 文本不会换行 */
  white-space: nowrap;
  /* 显示省略符号来代表被修剪的文本 */
  text-overflow: ellipsis;
}

@for $i from 2 through 3 {
  .text-overflow-hide-#{$i} {
    display: -webkit-box;
    /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical;
    /* 设置伸缩盒对象的子元素的排列方式为垂直的 */
    -webkit-line-clamp: $i;
    /* 限制在一个块元素显示的文本的行数 */
    overflow: hidden;
  }
}

//#endregion
// ===========================================================
//#region 宽高

$sizeList: list-merge($baseSuffixList, $sizeUnitBaseList);
$sizeMap: map-merge($BaseSuffixMap, $sizeUnitBaseMap);

@each $target in $sizeTargetList {
  @each $suffix in $sizeContentBaseList {
    .#{$target}-#{$suffix} {
      #{$target}: $suffix;
    }

    // 提升权重
    [class][class~='!#{$target}-#{$suffix}'] {
      #{$target}: $suffix;
    }
  }

  @each $suffix in $sizeList {
    .#{$target}-#{$suffix} {
      #{$target}: map-get($sizeMap , $suffix);
    }

    // 提升权重
    [class][class~='!#{$target}-#{$suffix}'] {
      #{$target}: map-get($sizeMap , $suffix);
    }
  }
}

//#endregion
// ===========================================================
//#region 点击穿透
.pointer-none {
  pointer-events: none;
}

.pointer-initial {
  pointer-events: initial;
}

.pointer-all {
  pointer-events: all;
}

.pointer-auto {
  pointer-events: auto;
}

// #endregion

//#region 状态
.grayscale {
  filter: grayscale(1);
}

//#endregion
//#region 盒子模型
.box-border {
  box-sizing: border-box;
}

.box-content {
  box-sizing: content-box;
}

//#endregion

//#region 布局
.inline-flex {
  display: inline-flex;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

//#endregion

//#region 文字对齐方式
.vertical-align-middle {
  vertical-align: middle;
}

.vertical-align-top {
  vertical-align: top;
}

.vertical-align-textTop {
  vertical-align: text-top;
}

.vertical-align-bottom {
  vertical-align: bottom;
}

.vertical-align-textBottom {
  vertical-align: text-bottom;
}

.vertical-align-sub {
  vertical-align: sub;
}

.vertical-align-super {
  vertical-align: super;
}

.vertical-align-baseline {
  vertical-align: baseline;
}

//#endregion
//#region 透明度
.opacity {
  opacity: 1;
}

.opacity-1 {
  opacity: 0.1;
}

.opacity-2 {
  opacity: 0.2;
}

.opacity-3 {
  opacity: 0.3;
}

.opacity-4 {
  opacity: 0.4;
}

.opacity-5 {
  opacity: 0.5;
}

.opacity-6 {
  opacity: 0.6;
}

.opacity-7 {
  opacity: 0.7;
}

.opacity-8 {
  opacity: 0.8;
}

.opacity-9 {
  opacity: 0.9;
}

//#endregion
//#region 溢出隐藏
.overflow {
  overflow: hidden;
}

.overflow::-webkit-scrollbar {
  display: none;
}

.overflow-auto {
  overflow: auto;
}

.overflow-x {
  overflow-x: hidden;
  overflow-y: auto;
}

.overflow-x::-webkit-scrollbar {
  display: none;
}

.overflow-y {
  overflow-x: auto;
  overflow-y: hidden;
}

.overflow-y::-webkit-scrollbar {
  display: none;
}

//#endregion

//#region 效果变化时间
.transition-1 {
  transition: all 0.1s;
}

.transition-2 {
  transition: all 0.2s;
}

.transition-3 {
  transition: all 0.3s;
}

.transition-4 {
  transition: all 0.4s;
}

//#endregion

/* 字体颜色 */
.cl-00 {
  color: #000;
}

.cl-11 {
  color: #111;
}

.cl-22 {
  color: #222;
}

.cl-33 {
  color: #333;
}

.cl-3e {
  color: #3e3e3e;
}

.cl-44 {
  color: #444;
}

.cl-55 {
  color: #555;
}

.cl-66 {
  color: #666;
}

.cl-77 {
  color: #777;
}

.cl-88 {
  color: #888;
}

.cl-92 {
  color: #929292;
}

.cl-98 {
  color: #989898;
}

.cl-aa {
  color: #aaa;
}

.cl-bb {
  color: #bbb;
}

.cl-b0 {
  color: #b0b0b0;
}

.cl-cc {
  color: #ccc;
}

.cl-dd {
  color: #ddd;
}

.cl-ee {
  color: #eee;
}

.cl-ff {
  color: #fff;
}

/* 字体粗细 */
.fw-2 {
  font-weight: 200;
}

.fw-3 {
  font-weight: 300;
}

.fw-4 {
  font-weight: 400;
}

.fw-5 {
  font-weight: 500;
}

.fw-6 {
  font-weight: 600;
}

.fw-7 {
  font-weight: 700;
}

.fw-bold {
  font-weight: bold;
}

.fw-normal {
  font-weight: normal;
}

/* 背景色 */
.bgc-ff {
  background-color: #fff;
}

.bgc-f6 {
  background-color: #f6f6f6;
}

.bgc-aa {
  background-color: #aaa;
}

.bgc-bb {
  background-color: #bbb;
}

.bgc-cc {
  background-color: #ccc;
}

.bgc-dd {
  background-color: #ddd;
}

.bgc-ee {
  background-color: #eee;
}

.bgc-f9 {
  background-color: #f9f9f9;
}


/* 鼠标 */
.c-pointer {
  cursor: pointer;
}

.c-not-allowed {
  cursor: not-allowed;
}

.c-move {
  cursor: move;
}

/* 定位 */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

/* 边距 */
.mar-center {
  margin: 0 auto;
}

/* 其他 */

/* 圆角 */
// 全
.rounded-xs {
  border-radius: 0.125rem;
}

.rounded-sm {
  border-radius: 0.25rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded {
  border-radius: 0.375rem;
}

.rounded-none {
  border-radius: 0px;
}

.rounded-fill {
  border-radius: 9999px;
}

// 上
.rounded-t-xs {
  border-top-left-radius: 0.125rem;
  border-top-right-radius: 0.125rem;
}

.rounded-t-sm {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.rounded-t-xl {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.rounded-t-3xl {
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}

.rounded-t {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.rounded-t-none {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.rounded-t-fill {
  border-top-left-radius: 9999px;
  border-top-right-radius: 9999px;
}

// 下
.rounded-b-xs {
  border-bottom-left-radius: 0.125rem;
  border-bottom-right-radius: 0.125rem;
}

.rounded-b-sm {
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.rounded-b-lg {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.rounded-b-xl {
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

.rounded-b-2xl {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.rounded-b-3xl {
  border-bottom-left-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
}

.rounded-b {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.rounded-b-none {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.rounded-b-fill {
  border-bottom-left-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

// 左
.rounded-l-xs {
  border-bottom-left-radius: 0.125rem;
  border-top-left-radius: 0.125rem;
}

.rounded-l-sm {
  border-bottom-left-radius: 0.25rem;
  border-top-left-radius: 0.25rem;
}

.rounded-l-lg {
  border-bottom-left-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
}

.rounded-l-xl {
  border-bottom-left-radius: 0.75rem;
  border-top-left-radius: 0.75rem;
}

.rounded-l-2xl {
  border-bottom-left-radius: 1rem;
  border-top-left-radius: 1rem;
}

.rounded-l-3xl {
  border-bottom-left-radius: 1.5rem;
  border-top-left-radius: 1.5rem;
}

.rounded-l {
  border-bottom-left-radius: 0.375rem;
  border-top-left-radius: 0.375rem;
}

.rounded-l-none {
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
}

.rounded-l-fill {
  border-bottom-left-radius: 9999px;
  border-top-left-radius: 9999px;
}

// 右
.rounded-r-xs {
  border-bottom-right-radius: 0.125rem;
  border-top-right-radius: 0.125rem;
}

.rounded-r-sm {
  border-bottom-right-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.rounded-r-lg {
  border-bottom-right-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.rounded-r-xl {
  border-bottom-right-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.rounded-r-2xl {
  border-bottom-right-radius: 1rem;
  border-top-right-radius: 1rem;
}

.rounded-r-3xl {
  border-bottom-right-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}

.rounded-r {
  border-bottom-right-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.rounded-r-none {
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}

.rounded-r-fill {
  border-bottom-right-radius: 9999px;
  border-top-right-radius: 9999px;
}

/*
   ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
   ↓↓↓↓以下内容摘自color ui↓↓↓↓
   ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
  */

/* ==================
			布局
   ==================== */

.grid {
  display: grid;
}

/*  -- flex弹性布局 -- */

[class].flex {
  display: flex;
}

.basis-xs {
  flex-basis: 20%;
}

.basis-sm {
  flex-basis: 40%;
}

.basis-df {
  flex-basis: 50%;
}

.basis-lg {
  flex-basis: 60%;
}

.basis-xl {
  flex-basis: 80%;
}

.flex-incompressible {
  flex: 0 0 auto;
}

.flex-fillRemaining {
  flex: 1 1 auto;
}

[class][class~='!flex-incompressible'] {
  flex: 0 0 auto;
}

[class][class~='!flex-fillRemaining'] {
  flex: 1 1 auto;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-sub {
  flex: 1;
}

.flex-twice {
  flex: 2;
}

.flex-treble {
  flex: 3;
}

.flex-col,
.flex-direction {
  flex-direction: column;
}

[class][class~='!flex-direction'] {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

.align-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: flex-center;
}

.self-end {
  align-self: flex-end;
}

.self-stretch {
  align-self: stretch;
}

.align-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

/* -- 浮动 --  */

.cf::after,
.cf::before {
  content: ' ';
  display: table;
}

.cf::after {
  clear: both;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

/* ==================
			背景
   ==================== */

.line-red::after,
.lines-red::after {
  border-color: #e54d42;
}

.line-orange::after,
.lines-orange::after {
  border-color: #f37b1d;
}

.line-yellow::after,
.lines-yellow::after {
  border-color: #fbbd08;
}

.line-olive::after,
.lines-olive::after {
  border-color: #8dc63f;
}

.line-green::after,
.lines-green::after {
  border-color: #39b54a;
}

.line-cyan::after,
.lines-cyan::after {
  border-color: #1cbbb4;
}

.line-blue::after,
.lines-blue::after {
  border-color: #0081ff;
}

.line-purple::after,
.lines-purple::after {
  border-color: #6739b6;
}

.line-mauve::after,
.lines-mauve::after {
  border-color: #9c26b0;
}

.line-pink::after,
.lines-pink::after {
  border-color: #e03997;
}

.line-brown::after,
.lines-brown::after {
  border-color: #a5673f;
}

.line-grey::after,
.lines-grey::after {
  border-color: #8799a3;
}

.line-gray::after,
.lines-gray::after {
  border-color: #aaaaaa;
}

.line-black::after,
.lines-black::after {
  border-color: #333333;
}

.line-white::after,
.lines-white::after {
  border-color: #ffffff;
}

.bg-red {
  background-color: #e54d42;
  color: #ffffff;
}

.bg-orange {
  background-color: #f37b1d;
  color: #ffffff;
}

.bg-yellow {
  background-color: #fbbd08;
  color: #333333;
}

.bg-olive {
  background-color: #8dc63f;
  color: #ffffff;
}

.bg-green {
  background-color: #39b54a;
  color: #ffffff;
}

.bg-cyan {
  background-color: #1cbbb4;
  color: #ffffff;
}

.bg-blue {
  background-color: #0081ff;
  color: #ffffff;
}

.bg-purple {
  background-color: #6739b6;
  color: #ffffff;
}

.bg-mauve {
  background-color: #9c26b0;
  color: #ffffff;
}

.bg-pink {
  background-color: #e03997;
  color: #ffffff;
}

.bg-brown {
  background-color: #a5673f;
  color: #ffffff;
}

.bg-grey {
  background-color: #8799a3;
  color: #ffffff;
}

.bg-gray {
  background-color: #f0f0f0;
  color: #333333;
}

.bg-black {
  background-color: #333333;
  color: #ffffff;
}

.bg-white {
  background-color: #ffffff;
  color: #666666;
}

.bg-shadeTop {
  background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
  color: #ffffff;
}

.bg-shadeBottom {
  background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
  color: #ffffff;
}

.bg-red.light {
  color: #e54d42;
  background-color: #fadbd9;
}

.bg-orange.light {
  color: #f37b1d;
  background-color: #fde6d2;
}

.bg-yellow.light {
  color: #fbbd08;
  background-color: #fef2ced2;
}

.bg-olive.light {
  color: #8dc63f;
  background-color: #e8f4d9;
}

.bg-green.light {
  color: #39b54a;
  background-color: #d7f0dbff;
}

.bg-cyan.light {
  color: #1cbbb4;
  background-color: #d2f1f0;
}

.bg-blue.light {
  color: #0081ff;
  background-color: #cce6ff;
}

.bg-purple.light {
  color: #6739b6;
  background-color: #e1d7f0;
}

.bg-mauve.light {
  color: #9c26b0;
  background-color: #ebd4ef;
}

.bg-pink.light {
  color: #e03997;
  background-color: #f9d7ea;
}

.bg-brown.light {
  color: #a5673f;
  background-color: #ede1d9;
}

.bg-grey.light {
  color: #8799a3;
  background-color: #e7ebed;
}

.bg-gradual-red {
  background-image: linear-gradient(45deg, #f43f3b, #ec008c);
  color: #ffffff;
}

.bg-gradual-orange {
  background-image: linear-gradient(45deg, #ff9700, #ed1c24);
  color: #ffffff;
}

.bg-gradual-green {
  background-image: linear-gradient(45deg, #39b54a, #8dc63f);
  color: #ffffff;
}

.bg-gradual-purple {
  background-image: linear-gradient(45deg, #9000ff, #5e00ff);
  color: #ffffff;
}

.bg-gradual-pink {
  background-image: linear-gradient(45deg, #ec008c, #6739b6);
  color: #ffffff;
}

.bg-gradual-blue {
  background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
  color: #ffffff;
}

.shadow[class~='-red'] {
  box-shadow: 6px 6px 8px rgba(204, 69, 59, 0.2);
}

.shadow[class~='-orange'] {
  box-shadow: 6px 6px 8px rgba(217, 109, 26, 0.2);
}

.shadow[class~='-yellow'] {
  box-shadow: 6px 6px 8px rgba(224, 170, 7, 0.2);
}

.shadow[class~='-olive'] {
  box-shadow: 6px 6px 8px rgba(124, 173, 55, 0.2);
}

.shadow[class~='-green'] {
  box-shadow: 6px 6px 8px rgba(48, 156, 63, 0.2);
}

.shadow[class~='-cyan'] {
  box-shadow: 6px 6px 8px rgba(28, 187, 180, 0.2);
}

.shadow[class~='-blue'] {
  box-shadow: 6px 6px 8px rgba(0, 102, 204, 0.2);
}

.shadow[class~='-purple'] {
  box-shadow: 6px 6px 8px rgba(88, 48, 156, 0.2);
}

.shadow[class~='-mauve'] {
  box-shadow: 6px 6px 8px rgba(133, 33, 150, 0.2);
}

.shadow[class~='-pink'] {
  box-shadow: 6px 6px 8px rgba(199, 50, 134, 0.2);
}

.shadow[class~='-brown'] {
  box-shadow: 6px 6px 8px rgba(140, 88, 53, 0.2);
}

.shadow[class~='-grey'] {
  box-shadow: 6px 6px 8px rgba(114, 130, 138, 0.2);
}

.shadow[class~='-gray'] {
  box-shadow: 6px 6px 8px rgba(114, 130, 138, 0.2);
}

.shadow[class~='-black'] {
  box-shadow: 6px 6px 8px rgba(26, 26, 26, 0.2);
}

.shadow[class~='-white'] {
  box-shadow: 6px 6px 8px rgba(26, 26, 26, 0.2);
}

.text-shadow[class~='-red'] {
  text-shadow: 6px 6px 8px rgba(204, 69, 59, 0.2);
}

.text-shadow[class~='-orange'] {
  text-shadow: 6px 6px 8px rgba(217, 109, 26, 0.2);
}

.text-shadow[class~='-yellow'] {
  text-shadow: 6px 6px 8px rgba(224, 170, 7, 0.2);
}

.text-shadow[class~='-olive'] {
  text-shadow: 6px 6px 8px rgba(124, 173, 55, 0.2);
}

.text-shadow[class~='-green'] {
  text-shadow: 6px 6px 8px rgba(48, 156, 63, 0.2);
}

.text-shadow[class~='-cyan'] {
  text-shadow: 6px 6px 8px rgba(28, 187, 180, 0.2);
}

.text-shadow[class~='-blue'] {
  text-shadow: 6px 6px 8px rgba(0, 102, 204, 0.2);
}

.text-shadow[class~='-purple'] {
  text-shadow: 6px 6px 8px rgba(88, 48, 156, 0.2);
}

.text-shadow[class~='-mauve'] {
  text-shadow: 6px 6px 8px rgba(133, 33, 150, 0.2);
}

.text-shadow[class~='-pink'] {
  text-shadow: 6px 6px 8px rgba(199, 50, 134, 0.2);
}

.text-shadow[class~='-brown'] {
  text-shadow: 6px 6px 8px rgba(140, 88, 53, 0.2);
}

.text-shadow[class~='-grey'] {
  text-shadow: 6px 6px 8px rgba(114, 130, 138, 0.2);
}

.text-shadow[class~='-gray'] {
  text-shadow: 6px 6px 8px rgba(114, 130, 138, 0.2);
}

.text-shadow[class~='-black'] {
  text-shadow: 6px 6px 8px rgba(26, 26, 26, 0.2);
}

.bg-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-mask {
  background-color: #333333;
  position: relative;
}

.bg-mask::after {
  content: '';
  border-radius: inherit;
  width: 100%;
  height: 100%;
  display: block;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.bg-mask view,
.bg-mask cover-view {
  z-index: 5;
  position: relative;
}

.bg-video {
  position: relative;
}

.bg-video video {
  display: block;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  top: 0;
  z-index: 0;
  pointer-events: none;
}

/* ==================
			 文本
	==================== */

.text-xs {
  font-size: 20px;
}

.text-sm {
  font-size: 24px;
}

.text-df {
  font-size: 28px;
}

.text-lg {
  font-size: 32px;
}

.text-xl {
  font-size: 36px;
}

.text-xxl {
  font-size: 44px;
}

.text-sl {
  font-size: 80px;
}

.text-xsl {
  font-size: 120px;
}

.text-Abc {
  text-transform: Capitalize;
}

.text-ABC {
  text-transform: Uppercase;
}

.text-abc {
  text-transform: Lowercase;
}

.text-price::before {
  content: '¥';
  font-size: 80%;
  margin-right: 4px;
}

.text-truncate,
.text-cut {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.text-bold {
  font-weight: bold;
}

.text-center {
  text-align: center;
}

.text-content {
  line-height: 1.6;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

[class].text-red,
[class].line-red,
[class].lines-red {
  color: #e54d42;
}

[class].text-orange,
[class].line-orange,
[class].lines-orange {
  color: #f37b1d;
}

[class].text-yellow,
[class].line-yellow,
[class].lines-yellow {
  color: #fbbd08;
}

[class].text-olive,
[class].line-olive,
[class].lines-olive {
  color: #8dc63f;
}

[class].text-green,
[class].line-green,
[class].lines-green {
  color: #39b54a;
}

[class].text-cyan,
[class].line-cyan,
[class].lines-cyan {
  color: #1cbbb4;
}

[class].text-blue,
[class].line-blue,
[class].lines-blue {
  color: #0081ff;
}

[class].text-purple,
[class].line-purple,
[class].lines-purple {
  color: #6739b6;
}

[class].text-mauve,
[class].line-mauve,
[class].lines-mauve {
  color: #9c26b0;
}

[class].text-pink,
[class].line-pink,
[class].lines-pink {
  color: #e03997;
}

[class].text-brown,
[class].line-brown,
[class].lines-brown {
  color: #a5673f;
}

[class].text-grey,
[class].line-grey,
[class].lines-grey {
  color: #8799a3;
}

[class].text-gray,
[class].line-gray,
[class].lines-gray {
  color: #aaaaaa;
}

[class].text-black,
[class].line-black,
[class].lines-black {
  color: #333333;
}

[class].text-white,
[class].line-white,
[class].lines-white {
  color: #ffffff;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gap-4 {
  gap: 1rem;
}

.list-move, /* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* ensure leaving items are taken out of layout flow so that moving
   animations can be calculated correctly. */
.list-leave-active {
  position: absolute;
}

.chart-internal-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  margin: 10px auto;
  th,td {
    padding: 4px;
    border: 1px solid var(--el-border-color);
    user-select: text;
  }
}

.el-icon {
  box-sizing: content-box !important;
}

@media screen {
  .container {
    max-width: none !important;
  }
}